<template>
    <div class="main">
        <header>
            <div class="head_left">
                <div></div>
                <p>CRM管理平台</p>
            </div>
            <div class="head_right">
                <i class="el-icon-search"></i>
                <i class="el-icon-bell"></i>
                <img src="" alt="">
                <div class="username">{{info.name}}</div>
            </div>
        </header>
        <section>
            <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>数据看板</span>
                    </template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>客户管理</span>
                    </template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>商户管理</span>
                    </template>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>合同管理</span>
                    </template>
                    <el-menu-item index="4-1">选项1</el-menu-item>
                    <el-menu-item index="4-2">选项2</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>资源管理</span>
                    </template>
                    <el-menu-item index="5-1">选项1</el-menu-item>
                    <el-menu-item index="5-2">选项2</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>设置</span>
                    </template>
                    <el-menu-item index="6-1">选项1</el-menu-item>
                    <el-menu-item index="6-2">选项2</el-menu-item>
                </el-submenu>
            </el-menu>
            <div class="subject">
                <div class="subject_top">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div style="padding: 20px;">
                    <router-view></router-view>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data:()=>({
        info:""
    }),
    mounted(){
        this.info = this.$route.query.info
        // console.log(this.$route.matched)
    },
    computed:{
        list(){
            return this.$route.matched
        }
    }
}
</script>

<style lang="scss" scoped>
header {
    width: 100%;
    height: 60px;
    background: #283446;
    padding: 0 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .head_left {
        width: 170px;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-between;

        div {
            width: 36px;
            height: 36px;
            background: #ffffff url(@/assets/images/南京协同定位与导航研究院logo圆形.png) no-repeat;
            background-size: 100%;
        }

        p {
            font-family: SourceHanSansCN-Bold;
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
        }
    }

    .head_right {
        width: 200px;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-evenly;

        i {
            width: 20px;
            display: block;
            height: 20px;
            color: #cccccc;
            cursor: pointer;
        }

        img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .username {
            font-family: SourceHanSansCN-ExtraLight;
            font-size: 14px;
            font-weight: 250;
            color: #ffffff;
        }
    }
}

section {
    height: calc(100vh - 60px);
    display: flex;

    .el-menu {
        width: 220px;
        height: 100%;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    }

    .subject {
        width: calc(100% - 220px);
        height: 100%;
        
        .subject_top{
            padding-left: 20px;
            box-sizing: border-box;
            width: 100%;
            height: 80px;
            align-items: center;
            display: flex;
        }
    }
}
</style>